<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>编辑订单详情</title>
		<script src="/js/vue.js"></script>
		<script src="/js/axios.js"></script>
		<script src="/js/qs.js"></script>
		<script src="/js/jquery.min.js"></script>
		<!-- import Vue.js -->
		<script src="//vuejs.org/js/vue.min.js"></script>
		<!-- import stylesheet -->
		<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
		<!-- import iView -->
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			#max {
				margin: 0 auto;
				width: 90%;
			}

			.el-table__header th,
			.el-table__header tr {
				background-color: #dee1e6;
				color: black;
			}

			.inp {}
		</style>
	</head>
	<body>
		<div id="max">
			<span style="font-size: 18px; margin-left:  10px; line-height: 60px;">编辑订单明细</span>
			<hr />
			<div id="app" style="width: 90%; margin: 0 auto;  margin-top: 3%;">
				<template>
					<el-table ref="multipleTable" style="border-radius: 5px;" :summary-method="getSummaries" border :data="tableData3" show-summary tooltip-effect="dark"
					 style="width: 100%" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="p_name" label="产品名" width="200px" align="center">
						</el-table-column>
						<el-table-column prop="price" label="成交价" align="center">
							<template slot-scope="{row,$index}">
								<el-input v-model="row.price" @change="updatePrice(row)" type="number" placeholder="请输入内容">{{row.money | rounding}}</el-input>
							</template>
						</el-table-column>
						<el-table-column prop="price1" label="销售价" align="center">
						</el-table-column>
						<el-table-column prop="count" label="数量" align="center">
							<template slot-scope="{row,$index}">
								<el-input-number v-model="row.count" type="number" style="width: 100px;" controls-position="right" @change="handleChange(row)"
								 :min="0" label="描述文字"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="discount" label="折扣" align="center">
							<template slot-scope="{row,$index}">
								<el-input-number v-model="row.discount" style="width: 110px;" :precision="3" :step="0.05" controls-position="right"
								 @change="handleChange(row)" :min="0.1" :max="1" label="描述文字"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="money" label="金额" align="center">
							 <template slot-scope="scope">
								  <span>{{scope.row.money | rounding}}</span>
								  </template>
						</el-table-column>
						<el-table-column prop="remark" label="备注" align="center">
							<template slot-scope="{row,$index}">
								<el-input type="textarea" style="width: 100%;" :rows="12" :autosize="{ minRows: 1 }" placeholder="" v-model="row.remark"
								 style="width: 80%;"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="操作" align="center">
							<template slot-scope="scope">
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">删除</div>
									<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;" @click="deletenew(scope.$index, tableData3)"></i>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<el-tooltip content="Bottom center" placement="bottom">
					<div slot="content">添加产品</div>
					<div @click="value1 = true" style="width: 100px; height: 100px; cursor: pointer; line-height: 100px; text-align: center; background-color: blue; border-radius: 50%;position: fixed; right: 20%; bottom: 20%;width: 80px;height: 80px;">
						<icon size="50"  style="color: white;margin: auto,auto; margin-top: 15px;" type="md-add-circle" />
					</div>
				</el-tooltip>
				
				<!-- <i-button :size="buttonSize" @click="value1 = true" style=" position: fixed; right: 20%; bottom: 20%;width: 80px;height: 77px;"
				 type="primary" shape="circle">
					<icon size="51" type="md-add-circle" />
				</i-button> -->
				<!-- 产品选择页 -->
				<drawer title="产品选择" :closable="true" width="30" v-model="value1">
					<div>
						<el-input style="width: 370px;" placeholder="" v-model="valu7">
							<el-button type="primary" slot="append" @click="selectpro()"  style=" width: 80px;">
								产品名
							</el-button>
						</el-input>
					</div>
					<div style="height: 30px;line-height: 30px;font-size: 15px; margin-top: 10px;">
						<el-table ref="proAlls" style="border-radius: 5px;" tooltip-effect="dark"  @row-click="addpro" :data="proAlls" border style="width: 100%;color: black;">
							<el-table-column prop="ID" label="编号" width="60" align="center">
							</el-table-column>
							<el-table-column prop="name" label="产品名"   align="center">
							</el-table-column>
							<el-table-column prop="price" label="价格(元)"  align="center">
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<div style="display: block; float: left; margin-top: 10px; margin-left: 90px;">
							<el-pagination background  @current-change="handleCurrentChange" :current-page="currentPage4"
							:page-size="pages.pageSize" layout="prev, pager, next" :total="pages.total">
							</el-pagination>
						</div>
						<br/>
						<!-- <i-span v-for="item in proAlls">
							<a @click="addpro(item)">{{item.name}}</a><br />
						</i-span> -->
						
					</div>
				</drawer>
				<el-button type="info" @click="saveOrderItem" style="display: block; margin: 0 auto; margin-top: 4%;" plain>保存订单详情</el-button>
				<div id="dg" style="z-index: 9999;background-color: #0030CE; position: fixed ! important; right: 10%; top: 90%;">
				</div>
			</div>

		</div>
		<script type="text/javascript">
			var orderItemView = ${
				orderItemView
			}
			var pros = ${
				proAll
			};
			var pagejson=${pagejson};
			var oid=${oid};
			var vue = new Vue({
				el: "#app",
				data: {
					tableData3: orderItemView,
					multipleSelection: [],
					input: '',
					value1: false,
					buttonSize: 'large',
					proAlls: pros,
					currentPage4: pagejson.pageNum,
					pages: pagejson,
					valu7:'',
				},
				methods: {
					selectpro(){
						//查询的行数
						var pageSize= 9;
						var statusid=null;
						var search=null;
						if(this.valu7==""||this.valu7==null){
							search=null;
						}else{
							search=this.valu7;
						}
						var _this=this;
						$.ajax({
						      type: "post",
						      url: "/sales/prosale/orderItemView",
						      data: {pageNum:1,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	  _this.proAlls=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
						handleCurrentChange(val) {
						//查询的行数
						var pageSize= 9;
						var statusid=null;
						var search=null;
						var _this=this;
						$.ajax({
						      type: "post",
						      url: "/sales/prosale/orderItemView",
						      data: {pageNum:val,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	  _this.proAlls=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					
					toggleSelection(rows) {
						if (rows) {
							rows.forEach(row => {
								this.$refs.multipleTable.toggleRowSelection(row);
							});
						} else {
							this.$refs.multipleTable.clearSelection();
						}
					},
					handleSelectionChange(val) {
						this.multipleSelection = val;
					},
					handleChange(value) {
						value.price = value.price1 * value.discount;
						var sumMoney = value.price * value.count;
						value.money = sumMoney;

						console.log(value);
					},
					getSummaries(param) {
						const {
							columns,
							data
						} = param;
						const sums = [];
						columns.forEach((column, index) => {
							if (index === 0) {
								sums[index] = '总计';
								return;
							}
							const values = data.map(item => Number(item[column.property]));
							if (!values.every(value => isNaN(value))) {

								sums[index] = values.reduce((prev, curr) => {
									const value = Number(index);
									if (!isNaN(value) || index != 6) {
										return prev + curr;
									} else {
										return '';
									}
								}, 0);
								if (index == 3 || index == 1 || index == 7) {
									sums[index] = '';
								}
								if (index == 4 || index == 5)
									sums[index] = '---';
								if (index == 6) {
									sums[index] = sums[index].toFixed(2);
									sums[index] += '元';
								}
							} else {
								sums[index] = '';
							}
						});
						return sums;
					},
					deletenew(index, rows) {
						rows.splice(index, 1);
					},
					saveOrderItem() {
						var _this=this;
						var params = new URLSearchParams();
		                params.append('oitem',JSON.stringify(this.tableData3));
						params.append('ID',oid);
						axios.post("/sales/prosale/addorderitemview",params
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v);
							window.location.href = '/sales/prosale/orderView?id=' + oid;
						}).catch(function() {
							alert("出错了");
						});
					},
					/* 点击添加一条订单 */
					addpro(item) {
						console.log(item);
						var tableData2 = {
							ID: '',
							p_id:'',
							p_name: '',
							price: '',
							o_id:oid,
							price1: '',
							count: 1,
							discount: 1,
							money: 36,
							remark: ''
						};
						var boo = false;
						var j = 0;
						for (var i = 0; i < orderItemView.length; i++) {
							if (orderItemView[i].p_id == item.ID) {
								boo = true;
								j = i;
							}
						}
						if (boo) {
							orderItemView[j].count += 1;
							this.value1 = false;
							var sumMoney = orderItemView[j].price * orderItemView[j].count;
							orderItemView[j].money = sumMoney;
						} else {
							tableData2.p_id=item.ID;
							tableData2.p_name = item.name;
							tableData2.price = item.price;
							tableData2.price1 = item.price;
							tableData2.money = item.price;
							this.value1 = false;
							this.tableData3.push(tableData2);
						}
					},
					updatePrice(row) {
						var v = /^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
						if (v.test(row.price)) {
							if (row.price > row.price1) {
								row.price = row.price1;
							}
						} else {
							row.price = row.price1;
						}
						var disc = row.price / row.price1;
						row.discount = disc.toFixed(2);
						var sumMoney = row.price * row.count;
						row.money = sumMoney;
					}
				},
				filters: {
					rounding(value) {
						return value.toFixed(2)
					}
				},
				mounted: function() {
					for (var i = 0; i < orderItemView.length; i++) {
						orderItemView[i].price = orderItemView[i].price1 * orderItemView[i].discount;
					}
				}
			})
		</script>


	</body>
</html>
